<template>
  <view class="container">
    <!-- 信息展示区域 -->
    <view class="info-section">
      <view class="info-item">
        <text class="info-title">违章时间</text>
        <text class="info-content">道路普货物运输</text>
      </view>

      <view class="info-item">
        <text class="info-title">从业人员</text>
        <text class="info-content">道路普货物运输</text>
      </view>

      <view class="info-item">
        <text class="info-title">身份证号</text>
        <text class="info-content">荆门420881206832</text>
      </view>

      <view class="info-item">
        <text class="info-title">档案编号</text>
        <text class="info-content">2019-07-03</text>
      </view>

      <view class="info-item">
        <text class="info-title">违章内容</text>
        <text class="info-content">钟祥市交通运输局</text>
      </view>

      <view class="info-item">
        <text class="info-title">记分条款</text>
        <text class="info-content">樊世合</text>
      </view>

      <view class="info-item">
        <text class="info-title">记分值</text>
        <text class="info-content">010-12345677</text>
      </view>

      <view class="info-item">
        <text class="info-title">状态</text>
        <text class="info-content">010-12345677</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
};
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  height: 100vh;
  background-color: #f3f6fa;
  padding: 20px;
  box-sizing: border-box;
}

/* 信息展示区域样式 */
.info-section {
  background-color: #fff;
  border-radius: 12px;
  padding: 15px;
  .info-item {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
  }
  .info-title {
    color: #79829c;
    font-size: 16px;
  }

  .info-content {
    color: #0d1444;
    font-size: 16px;
  }
}
</style>
